<script>
import { mapState } from 'vuex'
import ChauBasicInfo from '@/views/employee/chauffeur/components/chauffeurDetail/components/chauBasicInfo.vue'
import ChauBasicForm from '@/views/employee/chauffeur/components/chauffeurDetail/components/chauBasicForm.vue'
import ChauLicenseInfo from '@/views/employee/chauffeur/components/chauffeurDetail/components/chauLicenseInfo.vue'
import ChauLicenseForm from '@/views/employee/chauffeur/components/chauffeurDetail/components/chauLicenseForm.vue'

export default {
  name: 'chauffeurDetail',
  data() {
    return {
      edit: false,
      liceEdit: false
    }
  },
  methods: {
    /*
    * 获取司机详情的回调函数
    *  */
    async fetchChauffeurDetail() {
      try {
        await this.$store.dispatch('chauffeurStore/fetchChauffeurDetailAction', this.id)
      } catch (error) {
        this.$message.error(error.message)
      }
    },
    /*
    * 获取司机驾驶证信息的回调函数
    *  */
    async fetchLicenseInfo() {
      try {
        await this.$store.dispatch('chauffeurStore/fetchLicenseInfoAction', this.id)
      } catch (error) {
        this.$message.error(error.message)
      }
    },

    /*
    * 点击编辑按钮回调函数
    *  */
    handleEditInfo() {
      this.edit = true
    },
    /*
    * 点击取消按钮的回调函数
    *  */
    handleCancelInfo() {
      this.edit = false
    },
    /*
    * 保存基本信息的回调函数
    *  */
    async handleSaveBasicInfo() {
      try {
        const saveResult = await this.$store.dispatch('chauffeurStore/saveChauffeurAction', this.$refs.chauBasicFormRef.formData)
        this.edit = false
        this.$message.success(saveResult)
      } catch (error) {
        this.$message.error(error.message)
      }
    },
    /*
    *
    *  */
    handleEditLice() {
      this.liceEdit = true
    },
    /*
    *
    *  */
    handleCancelLice() {
      this.liceEdit = false
    },
    /*
    *
    *  */
    async handleSaveLice() {
      try {
        const saveResult = await this.$store.dispatch('chauffeurStore/saveLicenseInfoAction', this.$refs.chauLicenseFormRef.formData)
        this.liceEdit = false
        this.$message.success(saveResult)
      } catch (error) {
        this.$message.error(error.message)
      }
    }
  },
  computed: {
    id() {
      return this.$route.query.id
    },
    ...mapState('chauffeurStore', ['chauffeurDetail'])
  },
  mounted() {
    this.fetchChauffeurDetail()
    this.fetchLicenseInfo()
  },
  components: { ChauLicenseForm, ChauLicenseInfo, ChauBasicForm, ChauBasicInfo }
}
</script>

<template>
  <div class="chauffeur-detail">
    <el-tabs>
      <el-tab-pane label="基本信息">
        <chau-basic-info v-if="!edit"></chau-basic-info>
        <chau-basic-form ref="chauBasicFormRef" v-else></chau-basic-form>
        <div class="edit-btn" v-if="!edit">
          <el-button type="primary" icon="el-icon-edit" @click="handleEditInfo">编辑</el-button>
        </div>
        <div class="edit-btn" v-else>
          <el-button @click="handleCancelInfo">取消</el-button>
          <el-button type="primary" @click="handleSaveBasicInfo">保存</el-button>
        </div>
      </el-tab-pane>
      <el-tab-pane label="驾驶证信息">
        <chau-license-info v-if="!liceEdit"></chau-license-info>
        <chau-license-form ref="chauLicenseFormRef" v-else></chau-license-form>
        <div class="edit-btn" v-if="!liceEdit">
          <el-button type="primary" icon="el-icon-edit" @click="handleEditLice">编辑</el-button>
        </div>
        <div class="edit-btn" v-else>
          <el-button @click="handleCancelLice">取消</el-button>
          <el-button type="primary" @click="handleSaveLice">保存</el-button>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<style scoped lang="scss">
.chauffeur-detail {
  padding: 20px;
  margin: 20px;
  background: #fff;

  ::v-deep .el-tab-pane {
    position: relative;
    height: 550px;

    .edit-btn {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 20px;
    }
  }

  ::v-deep .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
    background-color: #eedcdc;
  }

}
</style>
